<template>
  <div>
            <div class="title">
                <div class="title-span">
                    <span>当前城市 - 苏州</span>    
                </div>
                <div class="title-input">
                    <input placeholder="输入城市名或者拼音" v-model="message" @input="search">
                    <span v-if="show" @click="cancle">取消</span>    
                </div>
            </div>
            <div class="cityshow" v-if="show">
                <ul>
                    <li v-for="item in searchlist" :key="item.name">{{item.name}}</li>    
                </ul>
            </div>
            <div class="hotdiv">
                <p>热门城市</p>  
                <div class="hot">
                    <div class="hotcity"  v-for="item in hotlist" :key="item.name">{{item.name}}</div>
                </div>  
            </div>

            <van-index-bar>
                <template v-for="item in list">
                    <!-- <van-index-anchor :index="item.name" style="background-color:rgb(244,244,244)"/> -->
                    <van-cell :title="i.name" v-for="i in item.citylist" :key="i"/>
                </template>
            </van-index-bar>    
        </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

import {get} from "axios"
export default {
    
    created(){
        let that = this;
            get('./data/city.json')
            .then(response => {
                let res = response.data.data.cities;
                for(let i = 0; i < res.length;i++){
                    //热门城市
                    if(res[i].isHot == 1){
                        that.hotlist.push(res[i]);
                    }

                    let city ={
                        name:res[i].pinyin.charAt(0).toUpperCase(),
                        citylist:[res[i]]
                    }
                    if(!that.list.length){
                        that.list.push(city);
                    }else{
                        let result = this.list.find(v=>{return v.name === city.name});
                        if(result){
                            result.citylist.push(city.citylist[0]);
                        }else{
                            that.list.push(city);
                        }
                    }
                }
                //排序
                that.list.sort(function(a,b){
                    if(a.name<b.name){
                        return -1;
                    }
                    if(a.name>b.name){
                        return 1;
                    }
                    return 0;
                });
                
            })
            .catch(function (error) { // 请求失败处理
                console.log(error);
            });
    },
    data(){
        return{
            list:[],
            hotlist:[],
            searchlist:[],
            message:"",
            show:false
        }
    },
    methods:{
        search(){
            this.searchlist =[];
            if(this.message){
                this.show = true;
            }else{
                this.show = false;
            }
            let that = this;
            this.list.filter(val=>{
                val.citylist.filter(v=>{
                    if(v.name.includes(that.message) || v.pinyin.includes(that.message)){
                        that.searchlist.push(v);
                    }
                })
            })
        },
        cancle(){
            this.message = "";
            this.show = false;
        }
    }
}
</script>
